<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>Flow-CLI</title>
    <meta content="Flow-CLI,front-flow" name="Keywords">
    <meta content="Flow-CLI是专为front-flow前端工作流开发的命令行工具，实现自动初始化、组件化开发、预处理、静态资源优化、图片压缩等前端自动化需求。" name="Description">
    <link href="/docs/favicon.ico" rel="icon">
<link href="/docs/css/style.css" rel="stylesheet">
<link href="/docs/lib/highlight/styles/github.css" rel="stylesheet">
<link href="/docs/css/style.css" rel="stylesheet">
<script type="text/javascript">
	if(window.location.href.indexOf('https')===0){
		document.write('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />');
	}
</script>
<!--[if lt IE 9]><script src="/docs/lib/H5shiv.js"></script><![endif]-->
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?f10103677155b485824f29def715eb5d";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
</head>

<body class="hasNav">
    <header class="doc-head">
    <h1><a href="/">Flow-CLI</a></h1>
    <ul class="_nav">
		<li><a href="/docs/">文档</a></li>
	</ul>
    <a href="https://github.com/flow-ui/Flow-CLI" target="_blank" class="_link">Github</a>
</header>
    <nav class="wrap nav" id="nav">导航生成中...</nav>
    <section class="wrap" id="overall">
        <h2>概述</h2>
        <h3 id="quictStart">快速开始</h3>
        <h4>安装</h4>
        <p>1. 安装<a href="https://nodejs.org/en/" target="_blank">nodejs</a>(>=6.5.0)</p>
        <p>2. 安装Flow-CLI：<code>npm install front-flow-cli -g</code></p>
        <p>3. 安装完成，查看版本号：<code>flow -V</code></p>
        <h4>使用</h4>
        <p><code>flow init</code></p>
        <p>在当前目录初始化一个<a href="https://github.com/front-flow/front-flow-template" target="_blank">front-flow-template</a>项目</p>
        <p><code>flow run [configName]</code></p>
        <p>编译当前项目并启动开发服务，实时编译并刷新浏览器，默认加载配置<code>config.json</code>，可指定配置文件名称</p>
        <p><code>flow build [configName]</code></p>
        <p>编译当前项目，默认加载配置<code>config.json</code>，可指定配置文件名称</p>
        
        <h3 id="directory">目录结构</h3>
        <p><a href="https://github.com/flow-ui/Flow-Template" target="_blank">默认模板</a>目录结构如下，其中下划线(<code>_</code>)开头的目录为编译资源，不需要部署到服务器，编译产出文件夹（默认"/dist"）和"/modules","/public"需要发布到服务器。</p>
        <pre>
            <code class="javascript"> 
  |--_component/                //框架CSS组件
  |-- _src/                     //源码目录
  |    |-- css/
  |    |-- font/
  |    |-- img/
  |    |-- include/
  |    |-- js/
  |    |-- lib/
  |    |-- index.html
  |    |-- seajs.config.js
  |    `-- favicon.ico 
  |-- modules/                  //框架JS插件
  |-- public/                   //公共文件
  `-- config.json               //编译配置
                </code>
          </pre>
        <h3 id="config">配置</h3>
        <p>编译相关的所有配置均在<code>config.json</code>中：</p>
        <table class="table table-hover">
            <tr>
                <td>projectDir</td>
                <td>
                    项目源码目录，默认"_src"
                </td>
            </tr>
            <tr>
                <td>distDir</td>
                <td>
                    编译输出目录，默认"dist"，也支持绝对路径，例如<code>E:\\IIS\\frontend\\web</code>
                    <p>注：当用绝对路径将编译结果输出到项目以外的目录时，<code>modules</code>(模块库)不会拷贝过去，为保证预览效果需要自行拷贝或配置远程模块库</p>
                </td>
            </tr>
            <tr>
                <td>port</td>
                <td>
                    开发服务端口号，默认3000
                </td>
            </tr>
            <tr>
                <td>homePage</td>
                <td>
                    开发服务起始页面，默认"index.html"
                </td>
            </tr>
            <tr>
                <td>serverRoot</td>
                <td>
                    站点部署路径，默认""，即站点根目录
                </td>
            </tr>
            <tr>
                <td>reloadDelay</td>
                <td>
                    开发服务刷新延时，默认0，单位ms
                </td>
            </tr>
            <tr>
                <td>rootHolder</td>
                <td>
                    源码中引用站点部署路径的占位符
                </td>
            </tr>
            <tr>
                <td>projectHolder</td>
                <td>
                    源码中引用项目源码目录的占位符
                </td>
            </tr>
            <tr>
                <td>distHolder</td>
                <td>
                    源码中引用产出目录的占位符
                </td>
            </tr>
            <tr>
                <td>UUIDHolder</td>
                <td>
                    组件<code>uuid</code>占位符，用于在组件中生成一个随机6位数字字母字符串
                </td>
            </tr>
            <tr>
                <td>checkUpdate</td>
                <td>
                    编译前是否检测新版本，默认true
                </td>
            </tr>
            <tr>
                <td>compress</td>
                <td>
                    编译时是否压缩代码，默认true
                </td>
            </tr>
            <tr>
                <td>extendsPath</td>
                <td>附加监听目录，默认<code>["modules/**"]</code>，将自动同步到编译目录（编译路径为绝对值时有效）</td>     
            </tr>
        </table>
    </section>
    <section class="wrap" id="compile">
        <h2>编译过程</h2>
        <p>编译按<code>script => image => font => html => css</code>顺序进行，各环节支持的格式如下，未包含的格式暂不被支持</p>
        <pre>
            <code>
const types = {
    script: 'js,coffee',
    css: 'css,less',
    img: 'JPG,jpg,png,gif',
    html: 'htm,html',
    font: 'eot,svg,ttf,woff'
};
            </code>
        </pre>
        
        <h3 id="compile-script">脚本</h3>
        <p>脚本编译经过以下流程：</p>
        <ol>
            <li>模块化相关文件合并压缩输出到编译目录<code>/lib/seajs.js</code>，包括：<code>'_src/lib/seajs/sea.js'</code>、<code>'_src/seajs.config.js'</code>、<code>'_src/lib/seajs/manifest.js'</code>、<code>'_src/lib/seajs/seajs-localcache.js'</code>
            </li>
            <li><code>_src/lib/</code>下的js(除了模块化相关文件)压缩后输出到编译目录<code>./lib</code></li>
            <li><code>_src/js/</code>中的js输出到编译目录<code>./js</code></li>
        </ol>
        <h3 id="compile-image">图片</h3>
        <p>项目内所有图片经过<a href="https://www.npmjs.com/package/gulp-imagemin" target="_blank">gulp-imagemin</a>插件压缩，输出到编译目录<code>./img</code></p>
        <h3 id="compile-widget">组件</h3>
        <p>组件定义了一个独立的页面片段，用于在模板中通过组件标签引用，编译过程不会输出(组件脚本除外，详见<a href="#compile-template">【模板编译】</a>)</p>
        <p>一个组件体现为<code>include/</code>中的一个文件夹，包含模板(<code>temp.html</code>)、样式(<code>style.less</code>)、脚本(<code>script.js</code>)，标签语法：</p>
        <pre>
            <code>
&lt;!--=require 组件文件夹名称 (组件模板数据)--&gt;
//示例
&lt;!--=require header--&gt;
&lt;!--=require uploadImg {&quot;val&quot;:&quot;&quot;}--&gt;
            </code>
        </pre>
        <p>如果组件标签中包含组件模板数据，那么组件模板(<code>temp.html</code>)会经过<code>_.template</code>渲染，语法见<a href="https://lodash.com/docs/4.17.2#template" target="_blank">lodash文档</a></p>
        <p>为使组件可以在一个页面中多次调用，组件支持<code>uuid</code>特性，每次调用会生成一个6位随机字符串，组件样式和组件脚本中的<code>uuid</code>会与组件模板中的<code>uuid</code>保持一致，例如可以给节点添加随机且唯一的id，在js中使用id选择器就不会造成混淆</p>

        <h3 id="compile-font">字体</h3>
        <p>字体文件源目录输出</p>
        <h3 id="compile-template">模板</h3>
        <p>模板编译经过以下流程：</p>
        <ol>
            <li>查找组件标签，编译组件模板内容，替换组件标签</li>
            <li>收集组件css内容，模板编译结束后调起css编译程序，届时组件css将编译到最终的style.css中</li>
            <li>收集组件script内容，包装成符合seajs模块规范，如果组件脚本数量大于1，将脚本合并成打包js文件输出到<code>include/</code>，模板页面底部将自动添加js链接，引用同样组件的模板可以复用已打包的脚本；如果只有1个组件脚本，脚本内容将内嵌到模板页面底部；如果该组件使用了<code>uuid</code>，那么该脚本也会内嵌在页面底部，因为<code>uuid</code>的唯一性使脚本失去了复用价值</li>
            <li>替换占位符</li>
            <li>输出到产出文件夹<code>./</code></li>
        </ol>
        <p>注：判断组件css和script个数的依据不是文件存在，而是内容不为空</p>
        <h3 id="compile-ui">样式</h3>
        <p>UI组件存放于<code>_component/</code>，<code>_src/css/config.less</code>是less配置文件，<code>_src/css/responsive.less</code>、<code>_src/css/resp-midd.less</code>、<code>_src/css/resp-smal.less</code>是响应式样式文件，这些文件可以按需在<code>_src/css/style.less</code>中引用，最终编译到产出目录<code>./css/style.css</code>中，不会单独输出到产出文件，他们的修改会触发<code>_src/css/style.less</code>的重新编译；</p>
        <p>项目里的其他css文件将按原相对路径输出到产出文件夹。</p>
        <p>输出前压缩、加浏览器前缀、替换占位符</p>
    </section>
    <section class="wrap" id="community">
        <h2>社区</h2>
        <h3 id="blog">博客</h3>
        <p><a href="http://refined-x.com/">前端技术博客</a></p>
        <h3 id="community-qq">讨论群</h3>
        <p><a href="https://jq.qq.com/?_wv=1027&amp;k=5Jx8Wu0" target="_blank" rel="external">361917044</a></p>
        <h3 id="logs">更新日志</h3>
        <div id="versionLogs">
            加载中...
        </div>
    </section>
    <footer class="wrap oh tc">
   <div class="row "> <a href="#" title="返回顶部" class="dib foot_logo gotop">
	   <figure></figure>
	</a>
	<p class="dib"> © 2016 - 3016  tower1229@gmail.com <a href="http://refined-x.com" title="雅X共赏的前端技术博客">雅X共赏</a> | <a href="http://flow-ui.refined-x.com/Flow-CLI/" title="Flow-CLI">Flow-CLI</a><br>
	Acknowledgements : seajs \ bootstrap \ foundation \ ... </p>
	</div>
</footer>
<script type="text/javascript" async="async" src="//push.zhanzhang.baidu.com/push.js"></script>
    <script src="/docs/lib/sea.js" id="seajsnode" ></script>
    <script>
    seajs.use('js/doc');
    </script>
    <script type="text/javascript">
        define('logs',function(require){
            var $ = require('jquery');
            var render = function(data){
                var html = '<table class="table">';
                $.each(data,function(i,e){
                    var tr = '<tr><td>'+e.version+'</td><td>'+e.description+'</td></tr>';
                    html += tr;
                });
                html += '</table>';
                $('#versionLogs').html(html);
            };
            $.ajax({
                url:'https://raw.githubusercontent.com/tower1229/Flow-CLI/master/package.json',
                dataType:'json',
                success:function(res){
                    var data = res.logs;
                    if(data){
                        render(data);
                    }
                }
            });
        });
        seajs.use('logs');
    </script>
</body>

</html>
